<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>HEXO 折腾 | CC的部落格</title><meta name="author" content="CC康纳百川"><meta name="copyright" content="CC康纳百川"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="ffffff"><article data-clarity-region="article"></article><meta name="description" content="本篇文章简单介绍了 HEXO 博客的搭建，部署更新等过程"><meta property="og:type" content="article"><meta property="og:title" content="HEXO 折腾"><meta property="og:url" content="https://blog.ccknbc.cc/posts/hexo-toss/"><meta property="og:site_name" content="CC的部落格"><meta property="og:description" content="本篇文章简单介绍了 HEXO 博客的搭建，部署更新等过程"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/45d888bd81b86777b3364e4a16ff72c6_w2240_h1260_s476.jpg"><meta property="article:published_time" content="2020-07-01T00:00:00.000Z"><meta property="article:modified_time" content="2020-07-01T04:00:00.000Z"><meta property="article:author" content="CC康纳百川"><meta property="article:tag" content="博客"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/45d888bd81b86777b3364e4a16ff72c6_w2240_h1260_s476.jpg"><link rel="shortcut icon" href="/favicon.ico"><link rel="canonical" href="https://blog.ccknbc.cc/posts/hexo-toss/"><link rel="preconnect" href="https://jsd.cdn.zzko.cn"><link rel="preconnect" href="//static.cloudflareinsights.com"><link rel="preconnect" href="//www.clarity.ms"><link rel="preconnect" href="//busuanzi.ibruce.info"><link rel="preconnect" href="https://97MUPN4DMC-dsn.algolia.net" crossorigin=""><meta name="google-site-verification" content="tUkgeN6Ih2ArWtjw47oNSSl4Af2_MWjiKLrzZptUCdM"><meta name="msvalidate.01" content="71ADBCC80D679CEA8080BAFDCD54E368"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/node-snackbar/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/@fancyapps/ui/dist/fancybox/fancybox.css" media="print" onload='this.media="all"'><script>(()=>{const t={set:(e,t,a)=>{var o;0!==a&&(o=Date.now(),localStorage.setItem(e,JSON.stringify({value:t,expiry:o+864e5*a})))},get:e=>{var t=localStorage.getItem(e);if(t){t=JSON.parse(t);if(!(Date.now()>t.expiry))return t.value;localStorage.removeItem(e)}}},a=(window.btf={saveToLocal:t,getScript:(o,n={})=>new Promise((t,e)=>{const a=document.createElement("script");a.src=o,a.async=!0,a.onerror=e,a.onload=a.onreadystatechange=function(){var e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},Object.keys(n).forEach(e=>{a.setAttribute(e,n[e])}),document.head.appendChild(a)}),getCSS:(o,n=!1)=>new Promise((t,e)=>{const a=document.createElement("link");a.rel="stylesheet",a.href=o,n&&(a.id=n),a.onerror=e,a.onload=a.onreadystatechange=function(){var e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},document.head.appendChild(a)}),addGlobalFn:(e,t,a=!1,o=window)=>{var n=o.globalFn||{},d=n[e]||{};a&&d[a]||(d[a=a||Object.keys(d).length]=t,n[e]=d,o.globalFn=n)}},()=>{document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")}),o=()=>{document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","ffffff")};btf.activateDarkMode=a,btf.activateLightMode=o;var e=t.get("theme"),n=window.matchMedia("(prefers-color-scheme: dark)").matches,d=window.matchMedia("(prefers-color-scheme: light)").matches,r=window.matchMedia("(prefers-color-scheme: no-preference)").matches,c=!n&&!d&&!r,n=(void 0===e?(d?o():n?a():(r||c)&&((d=(new Date).getHours())<=6||18<=d?a:o)(),window.matchMedia("(prefers-color-scheme: dark)").addListener(e=>{void 0===t.get("theme")&&(e.matches?a:o)()})):("light"===e?o:a)(),t.get("aside-status"));void 0!==n&&("hide"===n?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})()</script><script defer data-pjax="data-pjax" src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon="{&quot;token&quot;: &quot;35785b58f09f472ebfd7a2854973e6b8&quot;}"></script><script>!function(t,e,n,a,c,r){t[n]=t[n]||function(){(t[n].q=t[n].q||[]).push(arguments)},(c=e.createElement(a)).async=1,c.src="https://www.clarity.ms/tag/an4gdfm6a9",(r=e.getElementsByTagName(a)[0]).parentNode.insertBefore(c,r)}(window,document,"clarity","script")</script><script>const GLOBAL_CONFIG={postHeadAiDescription:{enable:!0,gptName:"CC",mode:"tianli",switchBtn:!0,btnLink:"https://tianli-blog.club/tianligpt/",randomNum:3,basicWordCount:1e3,key:"VCtoijR43E2uiVWkrZiC",Referer:"https://blog.ccknbc.cc/"},root:"/",algolia:void 0,localSearch:void 0,translate:{defaultEncoding:2,translateDelay:0,msgToTraditionalChinese:"繁",msgToSimplifiedChinese:"简"},noticeOutdate:{limitDay:15,position:"top",messagePrev:"本文最后一次更新为",messageNext:"天前，文章中的某些内容可能已过时！"},highlight:{plugin:"highlight.js",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:!1,highlightFullpage:!0,highlightMacStyle:!0},copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!1,post:!1},runtime:"天",dateSuffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:{limitCount:100,languages:{author:"作者: CC康纳百川",link:"链接: ",source:"来源: CC的部落格",info:"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},lightbox:"fancybox",Snackbar:{chs_to_cht:"你已切换为繁体中文",cht_to_chs:"你已切换为简体中文",day_to_night:"你已切换为深色模式",night_to_day:"你已切换为浅色模式",bgLight:"#49b1f5",bgDark:"#1f1f1f",position:"top-center"},infinitegrid:{js:"https://jsd.cdn.zzko.cn/npm/@egjs/infinitegrid/dist/infinitegrid.min.js",buttonText:"加载更多"},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!1,percent:{toc:!0,rightside:!0},autoDarkmode:!0}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={postAI:"本篇文章简单介绍了 HEXO 博客的搭建，部署更新等过程",pageFillDescription:"搭建步骤, 安装 Node.js, Git 与 GitHub, 安装 Git, 注册 GitHub, 安装 Hexo, 主题安裝, 使用 Hexo 主题, Git 安装, npm 安装, 应用主题, 生成静态文件, 与远程仓库建立关联, 部署, 备份与自动部署, 开始写作, 文章, 页面, FAQ, 视频？, 如何绑定你的自定义域名？, 备案, 源文件备份, 备份什么？, 备份方式, 如何优雅的魔改, 未完待续…折腾个人目前使用主题为版本版本请按照以下步骤依次安装相应依赖和框架搭建步骤安装什么是这得从什么是说起也就是为什么有种从盘古开天辟地开始的感觉没错就是网页的盘古是一种编程语言我们所见到的网页中的交互和逻辑处理几乎都是由完成语法简单易学易用当然也请不要小瞧它虽然它入门门槛低但上限同样也很高包括但不限于实现网站前后端手机桌面应用程序机器学习计算机图形学等在诞生前都运行于浏览器端也就是说它是鱼浏览器是装满了水的水缸年诞生年诞生并成为早期最著名的开源项目可能大家已有所了解后续再说便是一个基于引擎的运行环境当年第一次看到这句话时我也一脸懵逼按照我的理解是鱼就是抽水机则把这台抽水机也装在你电脑上于是你的电脑也有了这个和浏览器相似的水缸也可以在里面运行了当然和浏览器端还是因为自身定位和一些历史原因而有些许区别的不再展开百度百科下载建议下载长期支持版而非当前发布版因为如果是最新版容易出现一些奇妙的全部默认下一步进行安装打开命令提示符打开终端这个不会就请百度吧用户右上角关闭本标签页后续如提到输入命令均默认指打开终端进行输入输入如果得到的版本号与你方才安装的一致那么就已经成功安装安装成功时也默认安装了在此后将会用到是随一起被安装的包管理工具你可以理解成自带的应用商店对了国内使用可能很慢你可以考虑切换为镜像源常用包与命令与安装简称目前最为强大易用的编辑器轻量且快速宇宙第一编辑器注意它并不是我们常常听到的常常指的是是一个功能强大的集成开发环境体积也相比都要大上一个量级在此之前我建议你先安装因为安装时可以设置作为默认编辑器是一个开源的分布式版本控制系统由同时也是的作者为了管理开发而开发简而言之是一个版本管理工具譬如设计师设计好了第三版的海报客户却说还是要第一版吧这时便可以通过快速回退到最初的版本你只需要把每次更改的状态会自动进行检测你只要掌握基础的几条命令就可以了告诉而不需要每个版本都保存一份压缩包既方便也能大大节约空间当然这主要只对代码文本起作用因为的本质是记录各行代码的增减倘若是像视频海报这类二进制文件来说便体现不出丝毫优势了当然想要应对这种场景还有下载并安装如果国内速度太慢可以试试这里用户可以下载官网的安装包进行安装也可以直接安装的附带会安装但是比较大类似的工具还有但始终更推荐因为它功能更为强大且它的背后还有更强大的生态注册这一部分内容你也可以放到本地调试并预览成功后并打算线上部署的时候再回过头来看一听便与有所渊源在英文中是懒人饭桶之意则是中心集线器的意思譬如集线器就是所以就是饭桶中心大雾是全世界最大的开源项目与代码托管平台也是众多开发者的交流场所还是全球最大的同性交友网站而代码托管本身用到的正是上文提到的技术注册账号虽然都是英文但不必畏惧也并不会造成使用障碍只要记得最常用的选项含义即可以及善用手头的翻译软件注意注册时的英文用户名将成为你可以使用的免费域名前缀登录为什么要用对于平民玩家来说在初次尝试建立自己的网站时也许并不会有闲钱或者说决心来购买自己的服务器与域名而则提供了这一服务用户们可以利用这一服务部署自己的静态站点点击右上角的新建仓库仓库名称务必为你的用户名用户名是英文大小写无所谓但建议统一小写因为你会发现时常切换大小写很麻烦为什么必须这个作为仓库名服务的命名规范同时若您没有自己的域名使用提供的服务的话请务必将此仓库设为公开同时它也将成为你的专属域名当然你也可以购置自己的专属域名并用它来提供内容点击安装官方文档直接参考文档也是一个不错的选择为嘛使用是一个快速简洁而强大的博客框架基于同样托管于之上生态中拥有众多插件主题你可以基于它快速生成一些静态页面你可以使用别人的各种主题与插件也可以自己定制开发想要的功能为什么不是其他常用的博客框架还有等但这些往往都需要购置自己的服务器而无法静态化地部署到上当然相应的功能和灵活性也大大提升静态化站点还有一个优势就是访问速度往往更快静态网站生成器还有等但这些多是为了写文档而量身定制的你也可以使用它们但是相较的博客定位它们关于博客的插件和主题以及解决办法会少得多提供的功能与几乎都有生成大量文件时甚至比更快不过它是基于语言日后你想对自己的网站进行自定义即便是你编写前端的交互仍旧需要使用所以选择基于的可以降低学习成本你若对有兴趣仍然可以尝试使用但本教程将不会针对进行展开所以对于新手来说使用作为起始点不失为一个好选择当然如果你有钱租服务器并希望快速上手的话就可以考虑考虑或者这里顺带推荐一下小伙伴染川瞳的主题阔落的主题都是很漂亮的主题在终端中输入以下命令如果安装失败可能是没有权限可以尝试头部加上重新执行自然是安装则是的终端工具可以帮助你生成一些模版文件之后再用到代表的是全局安装也就是在任何地方都可以使用否则会只能在安装的目录下使用此时请先通过进入你本地电脑打算存储网站代码的文件夹目录或者右键文件夹命令命令譬如注意这里是你自定义的目录请不要复制粘贴字符后的文字代表注释不需要输入实际上我用的是目录按需选择即可接下来输入你的名字正是因为我们之前安装了这一个包所以我们可以在终端中使用这一命令初始化博客的模版文件后面跟的是你要新建的文件夹最好和你此前新建的仓库名一致进入你的博客文件夹你的名字默认安装所有文件中提到的包你也可以缩写成代表开启本地的服务器这时你就可以打开浏览器在地址栏中输入就可以看到本地的网页了按中断服务器的运行至此基础的模版页面便已经搭建好了主题安裝使用主题默认提供的是主题默认主题样式简单功能较少所以大多数人并不会使用默认主题安装在博客根目录里安装稳定版分支推荐如果想要安装比较新的分支可以安装此方法只支持以上版本在博客根目录里应用主题修改配置文件根目录把主题改为注意配置要和你的主题文件夹名大小写完全一致哦如果你沒有以及的渲染器请下载安装在进行配置修改之前为了以后主题通过平滑升级请不要随意改动主题源码虽然你可以通过强制合并来解决但保险点总是没错的并且由于主题的约定配置特性因此我们通常在根目录下把主题的主题目录复制过来并且重命名为然后再对进行修改即可有了上面的基础我们就可以根据对应的文档修改相应的配置了以下不再赘述生成静态文件至今我们的工作都是在本地进行想必你也很想放到线上与小伙伴们分享这便轮到了的出场不过只支持纯静态文件所以我们需要使用以下命令先来生成站点的静态文件如果进行多次生成为了避免受错误缓存影响最好使用先清除一遍缩写为此时你的文件夹目录下会出现这个文件夹里面存放的就是你站点的静态文件与远程仓库建立关联接下来我们将本地的仓库与此前在上建立的仓库建立关联初始化仓库只需要执行一次即可在将其部署到上之前我们最好先建立一个分支什么是分支提供了版本管理功能其中还有一个分支功能你现在可以简单地将其理解为平行世界你的名字部署后将默认使用你的分支作为静态文件部署所以我们最好新建一个分支命名无所谓用来存储地源代码分支则用来存储部署后的静态文件这时便成功建立了一个分支此后的工作都将在分支下进行你可以通过来查看当前有哪些分支使用分支名来切换到对应的分支学习笔记部署为了更方便的部署到提供了插件老规矩安装在中配置你此前新建的仓库的链接比如默认使用分支你可以自定义此次部署更新的说明保存部署第一次可能需要你输入用户名与密码密码输入的时候不会出现不要害怕已经输入进去了等待完成后打开网址你的名字就能看到你的线上网站了使用可能无法正常打开是多了安全加密的浏览器已经默认会显示链接为不安全为了安全建议开启强制跳转项目地址页面翻到下面此时网址会自动重定向到备份与自动部署我们当前只是将生成的静态文件部署到了云端为了以防万一我们应该将网站的源代码文件也推送到仓库备份与远程仓库建立连接只此一次即可你的用户名你的名字接下来准备提交这几句命令将是你以后每次备份所需要输入添加到缓存区这次做了什么更改简单描述下即可推送至远程仓库第一次提交你可能需设置一下默认提交分支每次推送都要输入这三条命令你可能觉得有些麻烦那么你可以编写脚本譬如在根目录下新建如果没有消息后缀默认提交信息为此后更新的话只需要在终端执行即可更新麻烦每次部署也很麻烦可以使用持续集成进行自动部署什么是持续集成持续集成是一种软件开发实践对软件进行自动化构建以此来发现错误就是一个线上持续集成服务的提供商它可以拉取你每次推送到上的代码然后根据你的要求对其进行构建我们可以趁机让它自动生成网站静态文件然后自动帮我们部署除此之外你还可以使用等服务相比等自身便拥有仓库的不再需要额外设置可以直接使用推荐一个专门用来部署的关于更多更具体的自动化部署方案和操作步骤你可以参考我的小伙伴的初探无后端静态博客自动化部署方案他在文章中详细介绍了和的部署方法你也可以参考的官方文档将部署到我就不在此画蛇添足当然还有个更简便的方法直接参考我的去掉夹在与之间的部分直接粘贴到你的文件夹自己新建下文件里即可推送后便可直接自动部署至此你的站点便基本搭建完成此后继续对主题进行自定义吧开始写作文章输入以下命令即可新建文件是的后缀名是一种简洁方便的文本标记语言你只需要记住简单的几种语法就可以快速进行编写为什么使用首先本身就是将转化为静态的文件来方便用户编写文章就好似介于与文本之间体积大大部分功能实际上根本用不到且最后的文档常常带有许多冗余信息而却无法实现加粗标题下划线水平分割线等常用的功能这里所说的只是一种纯文本格式的代称实际上也是纯文本文件不过通过语法和编译器我们就可以看到一些简单的样式譬如本文就是通过编写一级标题二级标题加粗文字更多语法虽然说是更多但是其实也没多少基本语法这是我写的一个样式上面是渲染过后的效果你可以与其的纯文本原文进行对比页面你可以新建一些自己的自定义页面譬如直接在目录下的文件夹下直接新建进行编写也可以通过以下命令来新建页面当然还是不过也是可以在里写的也会被渲染出来至于对应的参数配置请参考主题文档视频没有视频一是懒二是文字更利于更新勘误以及文章中将会频繁出现参考链接更方便使用如何绑定你的自定义域名首先你得有个自己的域名避免广告嫌疑你可以自行前往相关域名提供商购买但是如果你有幸能看到谷歌广告概率较小可以考虑点一点并使用解析到你的名字当然记录直接解析到地址也可以在工作目录下文件夹下新建文件没有后缀名即相当于告诉允许将为你的域名提供服务目录下的文件除了特殊的会被解析为其余都会原样复制到生成的静态文件夹中所以你需要在文件夹下建有它会在生成静态文件时将拷贝到静态文件夹并部署到分支如果只是在上设置项目地址页面它会自动添加到分支上但随后不包含的部署会将其覆盖内容填写你的域名即可备案如果想要使用国内的一些服务比如不备案确实寸步难行此处我指的是备案并非公安备案实际上我从来没有进行过公安备案且目前在使用服务时并未受到任何相关限制国内备案往往意味着你还需要一台国内的服务器譬如通过腾讯云备案时会需要你设置关联的服务器阿里云应当也是如此实际上你的网站并不一定得在这台服务器上即便你只是免费试用了一个月但是备案成功了之后过期了对备案也不会有何影响也就是说你完全可以使用学生优惠元左右购买一个月的云服务器用于关联并在这个月内抓紧备案好此后云服务器过期不会影响备案问题学生优惠的话阿里云或者腾讯云都有备案前需要注意的几点就是确定你的域名是否可以备案关闭评论区提交备案时的备注说明不得含有交流字样首页不能含有其他网站的直达链接遵纪守法无不良信息这是当然的你也可以直接关停网站等待备案成功后再重新打开今后每年偶尔会复查但相对会宽松许多此后按照网站指引的备案步骤一步步来即可以前还要等待幕布寄送拍照现在可以直接在手机上人脸验证备案成功后页脚必须清晰地展示备案号且备案号含有指向的超链接源文件备份备份什么百密总有一疏因此我们需要做好博客源文件的备份你固然可以直接将整个文件夹打包但当你后续安装的插件越来越多你会发现压缩或者解压耗时越来越长实际上我们只需要备份根目录的几个文件夹即可文件夹里面存放着你博客的主要资源的配置如果你不升级的话这个也是很重要的然后就是和它的名字一样他能告诉你你安装了哪些插件及其对应的版本有了这些你就能在另外一台电脑上很快恢复你的博客环境当然我本人采用了作为临时环境也是不错的我的一览如果其中一些插件你也有兴趣可以按照插件官方说明尝试这里不做功能注释虽然总会踩一些奇奇怪怪的坑但当你慢慢修正时虽然很折腾但的确是乐在其中备份方式不能在一棵树上吊死所以我选择了多平台备份分别是三个平台多一个平台多一份保障这里注册账号实名认证什么的不再赘述大家应该都会注意的一点就是我们建的仓库选择私有仓库不然别人把你一拷走就成别人的的了不过大多数人比较自觉我们这静态博客源码什么的也看的清清楚楚爬走很简单主要靠自觉防止转载其实无所谓秉着开源共享的理念其实标明出处大家也就不会特别在意首先在博客根目录使用以下命令初始化本地仓库添加一个远程仓库如果本地未显示文件夹请注意打开显示隐藏文件夹然后运行添加一个新的远程仓库同时指定一个方便使用的简写比如添加多个仓库地址等更多操作请参考基础远程仓库的使用按照个人喜好来添加多个仓库地址我这里全部使用的通过手动添加了的仓库地址不影响使用就行然后我们运行查看一下结果是自己想要的即可然后我们就可以推送对应的内容了上面这个是因为第一次推送我们采取强制推送如果还是不行我们因为是第一次无所谓以后请不要随意使用以后我们只需要即可同时的内容请根据实际需要自行修改以下是我的一览设置好后你可以更换你的第一个也就是仓库根据个人喜好来或者说网络原因下面使用的是的那么等操作就会按照这个仓库来和本地做比较选择一个连接比较快的就好在上面的添加多个仓库中个人因为懒的输入命令所以直接手动添加的下面两行反正目的达到就行然后在配置好公钥的情况下强制推送即可至此你的博客源文件已经推送至你的备份仓库可以去查看是否有一条强制推送的记录了同时检查是否有文件夹因为涉及到后面的魔改部分源文件修改因此我们也做好备份如果没有检查主题文件夹是否有文件夹删掉后再次推送即可如何优雅的魔改在不动主题源文件方便日后升级的情况下我们大部分采用外部引入的方式实现同时上传至借用提供的加速服务快速引用在博客根目录文件夹下新建一个和名字自己取就行最后我们正确引入即可在主题配置文件下文将直接简写根配根目录的主配主题配置目录下的搜索然后在以下位置插入对应的和即可例如我是存放在主题文件夹子文件夹和内所以按照上面所说的对应的你的链接即为其中是你的用户名请注意根据具体路径变通若是本地预览就可使用请根据路径自己修改接下来分别编辑和文件即可当然你可以直接复制粘贴或者直接引用我的链接标题颜色修改滚动条鼠标图标标签按钮标签页脚标签分页器头部的导航栏链接标签的默认颜色宽度大于小于执行打造效果渐变设置页脚博主会动的心康纳百川在特定日期变灰年月日新冠肺炎哀悼日清明节年月日青海玉树地震年月日四川汶川地震年月日甘肃舟曲特大泥石流年月日毛泽东逝世年月日南京大屠杀可爱的我藏好了哦被你发现啦更多类容可以百度自己有想法当然要实现啊未完待续",title:"HEXO 折腾",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2020-07-01 12:00:00"}</script><script>"serviceWorker"in navigator&&(navigator.serviceWorker.register("/sw.js",{scope:"/"}).then(r=>{r.onupdatefound=()=>{const e=r.installing;e.onstatechange=()=>{"installed"===e.state&&(navigator.serviceWorker.controller?(void 0!==GLOBAL_CONFIG.Snackbar&&btf.snackbarShow("已刷新缓存，更新为最新内容"),navigator.serviceWorker.controller.postMessage({type:"skipWaiting"})):console.log("第一次注册Service Worker"))}}}),navigator.serviceWorker.addEventListener("message",e=>{e.data&&"refresh"===e.data.type&&(console.log("收到刷新页面请求，开始刷新页面"),window.location.reload())}))</script><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/hexo-butterfly-tag-plugins-plus/lib/assets/font-awesome-animation.min.css" media="defer" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/hexo-butterfly-tag-plugins-plus/lib/tag_plugins.css" media="defer" onload='this.media="all"'><meta name="generator" content="Hexo 7.2.0"><link rel="alternate" href="/atom.xml" title="CC的部落格" type="application/atom+xml"><link rel="alternate" href="/rss.xml" title="CC的部落格" type="application/rss+xml"></head><body><script>window.paceOptions={restartOnPushState:!1},btf.addGlobalFn("pjaxSend",()=>{Pace.restart()},"pace_restart")</script><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/gh/CodeByZach/pace/themes/green/pace-theme-flash.css"><script src="https://jsd.cdn.zzko.cn/npm/pace-js/pace.min.js"></script><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/logo.png" onerror='onerror=null,src="https://jsd.cdn.zzko.cn/npm/hexo-theme-anzhiyu/source/img/404.jpg"' alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">38</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">7</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div><hr class="custom-hr"><div class="menus_items"><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-book-reader"></i><span> 文章</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fa-solid fa-box-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa-solid fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fa-solid fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-cubes"></i><span> 社交</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/blogroll/"><i class="fa-fw fa-solid fa-link"></i><span> 友链</span></a></li><li><a class="site-page child" href="/moments/"><i class="fa-fw fa-solid fa-blog"></i><span> 友圈</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa-solid fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/essay/"><i class="fa-fw fa-solid fa-comment-alt"></i><span> 短文</span></a></li></ul></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-desktop"></i><span> 关于</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/sub/"><i class="fa-fw fa-solid fa-bell"></i><span> 订阅</span></a></li><li><a class="site-page child" href="/about/"><i class="fa-fw fa-solid fa-list-check"></i><span> 本站</span></a></li><li><a class="site-page child" href="/privacy-policy/"><i class="fa-fw fa-solid fa-user-secret"></i><span> 隐私</span></a></li><li><a class="site-page child" target="_blank" rel="noopener external nofollow noreferrer" href="https://cc.instatus.com"><i class="fa-fw fa-solid fa-server"></i><span> 状态</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image:url(https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/45d888bd81b86777b3364e4a16ff72c6_w2240_h1260_s476.jpg)"><nav id="nav"><span id="blog-info"><a href="/" title="CC的部落格"><span class="site-name">CC的部落格</span></a></span><div id="menus"><div id="search-button"><span class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></span></div><div class="menus_items"><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-book-reader"></i><span> 文章</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fa-solid fa-box-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa-solid fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fa-solid fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-cubes"></i><span> 社交</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/blogroll/"><i class="fa-fw fa-solid fa-link"></i><span> 友链</span></a></li><li><a class="site-page child" href="/moments/"><i class="fa-fw fa-solid fa-blog"></i><span> 友圈</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa-solid fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/essay/"><i class="fa-fw fa-solid fa-comment-alt"></i><span> 短文</span></a></li></ul></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-desktop"></i><span> 关于</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/sub/"><i class="fa-fw fa-solid fa-bell"></i><span> 订阅</span></a></li><li><a class="site-page child" href="/about/"><i class="fa-fw fa-solid fa-list-check"></i><span> 本站</span></a></li><li><a class="site-page child" href="/privacy-policy/"><i class="fa-fw fa-solid fa-user-secret"></i><span> 隐私</span></a></li><li><a class="site-page child" target="_blank" rel="noopener external nofollow noreferrer" href="https://cc.instatus.com"><i class="fa-fw fa-solid fa-server"></i><span> 状态</span></a></li></ul></div></div><div id="toggle-menu"><span class="site-page"><i class="fas fa-bars fa-fw"></i></span></div></div></nav><div id="post-info"><h1 class="post-title">HEXO 折腾</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2020-07-01T00:00:00.000Z" title="发表于 2020-07-01 08:00:00">2020-07-01</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2020-07-01T04:00:00.000Z" title="更新于 2020-07-01 12:00:00">2020-07-01</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">8.5k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>32分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" data-flag-title="HEXO 折腾"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><div class="post-ai-description"><div class="ai-title"><i class="fa-solid fa-newspaper"></i><div class="ai-title-text">AI-摘要</div><div id="ai-Toggle" title="CC/Tianli 模式切换">切换</div><i class="fa-solid fa-podcast" title="Tianli 模式下朗读摘要"></i><i class="fa-solid fa-arrow-rotate-right" title="Tianli 模式下刷新摘要"></i><div id="ai-tag">Tianli GPT</div></div><div class="ai-explanation">AI初始化中...</div><div class="ai-btn-box"><div class="ai-btn-item">介绍自己 🙈</div><div class="ai-btn-item">生成摘要 👋</div><div class="ai-btn-item">相关推荐 📖</div><div class="ai-btn-item">前往主页 🏠</div><div class="ai-btn-item" id="go-tianli-blog">前往爱发电购买</div></div><script data-pjax src="/"></script></div><article class="post-content" id="article-container"><p><a href="https://blog.ccknbc.cc/posts/hexo-toss/">HEXO 折腾</a>个人目前使用主题为 Butterfly <code>3.0.1</code>版本，HEXO <code>5.0.2</code>版本</p><p>请按照以下步骤依次安装相应依赖和框架</p><h2 id="搭建步骤">搭建步骤<a class="fa-solid fa-hashtag" href="#搭建步骤"></a></h2><h3 id="安装-Node-js">安装 Node.js<a class="fa-solid fa-hashtag" href="#安装-Node-js"></a></h3><blockquote><p><strong>什么是 Node.js ？</strong> 这得从什么是 JS 说起，JS 也就是 JavaScript。（为什么有种从盘古开天辟地开始的感觉）没错，JavaScript 就是网页的盘古。JavaScript 是一种编程语言，我们所见到的网页中的交互和逻辑处理几乎都是由 JavaScript 完成。 JavaScript 语法简单，易学易用。（当然也请不要小瞧它，虽然它入门门槛低，但上限同样也很高。包括但不限于实现网站前后端，手机桌面应用程序，机器学习，计算机图形学等。）在 Node.js 诞生前，JavaScript 都运行于浏览器端。也就是说，它是鱼，浏览器是装满了水的水缸。 2008 年，Chrome V8 诞生。2009 年，Node.js 诞生。并成为 GitHub 早期最著名的开源项目。GitHub 可能大家已有所了解，后续再说。 Node.js 便是一个基于 Chrome V8 引擎的 JavaScript 运行环境。（当年第一次看到这句话时，我也一脸懵逼。）按照我的理解，JavaScript 是鱼，Chrome V8 就是抽水机，Node.js 则把这台抽水机也装在你电脑上。于是你的电脑也有了 Node.js 这个和浏览器相似的水缸，也可以在里面运行 JavaScript 了！当然 Node.js 和浏览器端还是因为自身定位和一些历史原因而有些许区别的，不再展开。 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://baike.baidu.com/item/node.js/7567977">Node.js | 百度百科</a> <a target="_blank" rel="noopener external nofollow noreferrer" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript">JavaScript | MDN</a></p></blockquote><p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://nodejs.org/zh-cn/">下载｜ Node.js</a></p><p>建议下载<strong>长期支持版</strong>而非<strong>当前发布版</strong>（因为如果是最新版，容易出现一些奇妙的 bug）。</p><p>全部默认下一步进行安装。</p><p>Windows 打开命令提示符，macOS 打开终端。（= =，这个不会就请百度吧。） Linux 用户右上角关闭本标签页。</p><p>后续如提到输入命令，均默认指打开终端进行输入。</p><p>输入 <code>node --version</code>，如果得到的版本号与你方才安装的一致，那么 Node.js 就已经成功安装。</p><blockquote><p>Node.js 安装成功时也默认安装了 <code>npm</code>，在此后将会用到。 <code>npm</code> 是随 Node.js 一起被安装的包管理工具，你可以理解成 Node.js 自带的应用商店。</p></blockquote><p>对了，国内使用 npm 可能很慢。</p><p>你可以考虑切换为 <code>taobao</code> 镜像源。</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm config set registry https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure><blockquote><p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.yuque.com/yunyoujun/notes/npm-and-yarn#nrm">npm &amp; yarn 常用包与命令</a></p></blockquote><h3 id="Git-与-GitHub">Git 与 GitHub<a class="fa-solid fa-hashtag" href="#Git-与-GitHub"></a></h3><h4 id="安装-Git">安装 Git<a class="fa-solid fa-hashtag" href="#安装-Git"></a></h4><blockquote><p>Visual Studio Code，简称 VS Code。目前最为强大易用的编辑器，轻量且快速。（<s>宇宙第一编辑器</s>）注意：它并不是我们常常听到的 VS，VS 常常指的是 Visual Studio，是一个功能强大的 IDE（集成开发环境），体积也相比 VS Code 都要大上一个量级。</p></blockquote><p>在此之前，我建议你先安装 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://code.visualstudio.com/">VS Code</a>。因为安装 Git Bash 时，可以设置 VS Code 作为默认编辑器。</p><blockquote><p>Git 是一个开源的分布式版本控制系统，由 Linus Torvalds（同时也是 Linux 的作者）为了管理 Linux 开发而开发。简而言之，是一个版本管理工具。譬如设计师设计好了第三版的海报，客户却说还是要第一版吧，这时便可以通过 Git 快速回退到最初的版本。你只需要把每次更改的状态（Git 会自动进行检测，你只要掌握基础的几条命令就可以了）告诉 Git，而不需要每个版本都保存一份压缩包，既方便也能大大节约空间。（当然这主要只对代码文本起作用，因为 Git 的本质是记录各行代码的增减，倘若是像视频、海报这类二进制文件来说便体现不出丝毫优势了。当然想要应对这种场景还有 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://git-lfs.github.com/">Git LFS</a>。）</p></blockquote><p>下载 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://git-scm.com/">Git</a> 并安装（如果国内速度太慢，可以试试<a target="_blank" rel="noopener external nofollow noreferrer" href="https://pc.qq.com/detail/13/detail_22693.html">这里</a>）</p><p>macOS 用户可以下载官网的安装包进行安装，也可以直接安装 App Store 的 Xcode（附带会安装 Git，但是比较大）。</p><blockquote><p>类似的工具还有：SVN。但始终更推荐 Git，因为它功能更为强大且它的背后还有更强大的生态：GitHub。</p></blockquote><h4 id="注册-GitHub">注册 GitHub<a class="fa-solid fa-hashtag" href="#注册-GitHub"></a></h4><p>这一部分内容，你也可以放到本地调试并预览成功后并打算线上部署的时候，再回过头来看。</p><blockquote><p>GitHub 一听便与 Git 有所渊源。<code>Git</code> 在英文中是懒人、饭桶之意。<code>Hub</code> 则是中心、集线器的意思。譬如 USB 集线器就是 USB Hub。所以 GitHub 就是饭桶中心（<s>大雾</s>）。 GitHub 是全世界最大的开源项目与代码托管平台，也是众多开发者的交流场所。<s>还是全球最大的同性交友网站</s>。而代码托管本身用到的正是上文提到的 Git 技术。</p></blockquote><p>注册 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/">GitHub</a> 账号。（虽然都是英文，但不必畏惧，也并不会造成使用障碍，只要记得最常用的选项含义即可，以及善用手头的翻译软件。）</p><blockquote><p>注意：注册时的英文用户名将成为你可以使用的免费域名前缀。</p></blockquote><p>登录 GitHub。</p><blockquote><p>为什么要用 GitHub？对于平民玩家来说，在初次尝试建立自己的网站时，也许并不会有闲钱或者说决心来购买自己的服务器与域名。而 GitHub 则提供了 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://pages.github.com/">GitHub Pages</a> 这一服务。用户们可以利用这一服务，部署自己的静态站点。</p></blockquote><p>点击右上角的 <code>+</code> -&gt; <code>New repository</code> 新建仓库。</p><p>仓库名称务必为 <code>你的用户名.github.io</code>，用户名是英文，大小写无所谓，但建议统一小写。（因为你会发现时常切换大小写很麻烦）</p><blockquote><p>为什么必须这个作为仓库名？ GitHub Pages 服务的命名规范，同时若您没有自己的域名，使用 Github 提供的服务的话，请务必将此仓库设为公开，同时它也将成为你的专属域名。当然，你也可以购置自己的专属域名并用它来提供内容。</p></blockquote><p>点击 <code>Create repository</code>。</p><h3 id="安装-Hexo">安装 Hexo<a class="fa-solid fa-hashtag" href="#安装-Hexo"></a></h3><p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://hexo.io">Hexo</a></p><ul><li>GitHub: <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/hexojs/hexo">https://github.com/hexojs/hexo</a></li><li><a target="_blank" rel="noopener external nofollow noreferrer" href="https://hexo.io/zh-cn/docs/index.html">官方文档</a>（直接参考文档也是一个不错的选择）</li></ul><blockquote><p><strong>为嘛使用 Hexo ？</strong> Hexo 是一个快速、简洁而强大的博客框架，基于 Node.js，同样托管于 GitHub 之上。生态中拥有众多插件主题。你可以基于它快速生成一些静态页面。你可以使用别人的各种主题与插件，也可以自己定制开发想要的功能。 <strong>为什么不是…?</strong> 其他常用的博客框架还有 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://wordpress.org/">WordPress</a>，<a target="_blank" rel="noopener external nofollow noreferrer" href="https://typecho.org/">Typecho</a>，<a target="_blank" rel="noopener external nofollow noreferrer" href="https://ghost.org/">Ghost</a> 等，但这些往往都需要购置自己的服务器，而无法静态化地部署到 GitHub Pages 上。（当然，相应的功能和灵活性也大大提升。）静态化站点还有一个优势就是访问速度往往更快。静态网站生成器还有 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://vuepress.vuejs.org/">Vuepress</a>，<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.gatsbyjs.org/">Gatsby</a> 等。但这些多是为了写文档而量身定制的，你也可以使用它们，但是相较 Hexo 的博客定位，它们关于博客的插件和主题以及解决办法会少得多。 Hexo 提供的功能与 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://gohugo.io/">Hugo</a> 几乎都有，（生成大量文件时，甚至比 Hexo 更快）不过它是基于 GO 语言。日后你想对自己的网站进行自定义，即便是 Hugo，你编写前端的交互仍旧需要使用 JavaScript，所以选择基于 JavaScript 的 Hexo 可以降低学习成本。（你若对 GO 有兴趣，仍然可以尝试使用 Hugo，但本教程将不会针对 Hugo 进行展开。）所以对于新手来说，使用 Hexo 作为起始点，不失为一个好选择。（当然如果你有钱租服务器，并希望快速上手的话，就可以考虑考虑 WordPress 或者 Typecho）这里顺带推荐一下小伙伴 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://asuhe.jp/">染川瞳</a> 的 WordPress 主题 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/mirai-mamori/Sakurairo">Sakurairo</a>，<a target="_blank" rel="noopener external nofollow noreferrer" href="https://guhub.cn/">阔落</a> 的 Typecho 主题 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/BigCoke233/miracles">miracles</a>，都是很漂亮的主题。</p></blockquote><p>在终端中输入以下命令：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-cli -g</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">如果安装失败，可能是没有权限，可以尝试头部加上 sudo 重新执行</span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">sudo npm install hexo-cli -g</span></span><br></pre></td></tr></table></figure><blockquote><p><code>install</code> 自然是安装。 <code>hexo-cli</code> 则是 <code>hexo</code> 的终端工具，可以帮助你生成一些模版文件，之后再用到。 <code>-g</code> 代表的是全局安装。也就是在任何地方都可以使用，否则会只能在安装的目录下使用。</p></blockquote><p>此时，请先通过 <code>cd</code> 进入你本地电脑打算存储网站代码的文件夹目录。（或者右键文件夹 Git Bash Here）</p><blockquote><p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://baike.baidu.com/item/cd/3516393">cd | DOS 命令</a> <a target="_blank" rel="noopener external nofollow noreferrer" href="https://baike.baidu.com/item/cd/3516411">cd （LINUXSHELL 命令）</a></p></blockquote><p>譬如：</p><blockquote><p>注意：这里是你自定义的目录，请不要复制粘贴</p></blockquote><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash"><span class="string">&#x27;#&#x27;</span> 字符后的文字代表注释，不需要输入</span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">Windows</span></span><br><span class="line">cd C:\Users\CCKNBC\Documents\GitHub\</span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">实际上我用的是D:blog目录,按需选择即可</span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">macOS</span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash"><span class="built_in">cd</span> /Users/yunyou/github/</span></span><br></pre></td></tr></table></figure><p>接下来输入：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo init 你的名字.github.io</span><br></pre></td></tr></table></figure><blockquote><p><code>hexo</code> 正是因为我们之前安装了 <code>hexo-cli</code> 这一个包，所以我们可以在终端中使用 <code>hexo</code> 这一命令。 <code>init</code> 初始化博客的模版文件。后面跟的是你要新建的文件夹，最好和你此前新建的仓库名一致。</p></blockquote><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">进入你的博客文件夹</span></span><br><span class="line">cd 你的名字.github.io</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">默认安装所有 `package.json` 文件中提到的包</span></span><br><span class="line">npm install</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">你也可以缩写成 hexo s</span></span><br><span class="line">hexo server</span><br></pre></td></tr></table></figure><p><code>server</code> 代表开启本地的 Hexo 服务器，这时你就可以打开浏览器，在地址栏中输入 <code>localhost:4000</code> 就可以看到本地的网页了。</p><p>按 <code>Ctrl + C</code> 中断服务器的运行。</p><p>至此，基础的模版页面便已经搭建好了。</p><h3 id="主题安裝">主题安裝<a class="fa-solid fa-hashtag" href="#主题安裝"></a></h3><h3 id="使用-Hexo-主题">使用 Hexo 主题<a class="fa-solid fa-hashtag" href="#使用-Hexo-主题"></a></h3><p>Hexo 默认提供的是 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/hexojs/hexo-theme-landscape">hexo-theme-landscape</a> 主题。默认主题样式简单，功能较少。所以大多数人并不会使用默认主题。</p><h3 id="Git-安装">Git 安装<a class="fa-solid fa-hashtag" href="#Git-安装"></a></h3><p>在博客根目录里安装稳定版<code>master</code>分支【推荐】</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone <span class="literal">-b</span> master https://github.com/jerryc127/hexo<span class="literal">-theme-butterfly</span>.git themes/butterfly</span><br></pre></td></tr></table></figure><p>如果想要安装比较新的<code>dev</code>分支，可以</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone <span class="literal">-b</span> dev https://github.com/jerryc127/hexo<span class="literal">-theme-butterfly</span>.git themes/butterfly</span><br></pre></td></tr></table></figure><h3 id="npm-安装">npm 安装<a class="fa-solid fa-hashtag" href="#npm-安装"></a></h3><blockquote><p>此方法只支持<code>Hexo 5.0.0</code>以上版本</p></blockquote><p>在博客根目录里</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i hexo<span class="literal">-theme-butterfly</span></span><br></pre></td></tr></table></figure><h3 id="应用主题">应用主题<a class="fa-solid fa-hashtag" href="#应用主题"></a></h3><p>修改 hexo 配置文件<code>_config.yml</code>（根目录），把主题改为<code>Butterfly</code>（注意配置要和你的主题文件夹名大小写完全一致哦）</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">theme: butterfly</span><br></pre></td></tr></table></figure><blockquote><p>如果你沒有<code>pug</code>以及<code>stylus</code>的渲染器，请下载安装：</p></blockquote><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-renderer-pug hexo-renderer-stylus --save</span><br></pre></td></tr></table></figure><blockquote><p>在进行配置修改之前，为了以后主题通过 git pull 平滑升级，请不要随意改动主题源码，虽然你可以通过强制合并来解决，但保险点总是没错的，并且由于主题的<code>**约定&gt;配置**</code>特性，因此我们通常在 Hexo 根目录<code>**sorce/_data**</code>下把主题的<code>**_config.yml**</code>（主题目录）复制过来，并且重命名为<code>**butterfly.yml**</code>，然后再对 butterfly.yml 进行修改即可</p></blockquote><p>有了上面的基础，我们就可以根据对应的<a target="_blank" rel="noopener external nofollow noreferrer" href="https://demo.jerryc.me"><strong>文档</strong></a>修改相应的配置了,以下不再赘述</p><h3 id="生成静态文件">生成静态文件<a class="fa-solid fa-hashtag" href="#生成静态文件"></a></h3><p>至今我们的工作都是在本地进行，想必你也很想放到线上与小伙伴们分享。这便轮到了 GitHub Pages 的出场，不过 GitHub Pages 只支持纯静态文件。</p><p>所以我们需要使用以下命令先来生成站点的静态文件。</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">如果进行多次生成，为了避免受错误缓存影响，最好使用 hexo clean 先清除一遍。</span></span><br><span class="line">hexo generate</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">缩写为 hexo g</span></span><br></pre></td></tr></table></figure><p>此时你的文件夹目录下会出现 <code>public</code> 这个文件夹，里面存放的就是你站点的静态文件。</p><h3 id="与远程仓库建立关联">与远程仓库建立关联<a class="fa-solid fa-hashtag" href="#与远程仓库建立关联"></a></h3><p>接下来我们将本地的仓库与此前在 GitHub 上建立的仓库建立关联。</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git init # 初始化 Git 仓库，只需要执行一次即可</span><br></pre></td></tr></table></figure><p>在将其部署到 GitHub Pages 上之前，我们最好先建立一个分支。</p><blockquote><p>什么是分支？ Git 提供了版本管理功能，其中还有一个分支功能，你现在可以简单地将其理解为平行世界。</p></blockquote><p><code>你的名字.github.io</code> 部署后，GitHub Pages 将默认使用你的 master 分支作为静态文件部署。所以我们最好新建一个 hexo 分支（命名无所谓）用来存储 Hexo 地源代码，master 分支则用来存储部署后的静态文件。</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git checkout -b hexo</span><br></pre></td></tr></table></figure><p>这时便成功建立了一个 hexo 分支。（此后的工作都将在 hexo 分支下进行）</p><p>你可以通过 <code>git branch -v</code> 来查看当前有哪些分支，使用 <code>git branch 分支名</code> 来切换到对应的分支。</p><blockquote><p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.yunyoujun.cn/note/git-learn-note/">Git 学习笔记</a></p></blockquote><h3 id="部署">部署<a class="fa-solid fa-hashtag" href="#部署"></a></h3><p>为了更方便的部署到 GitHub Pages，Hexo 提供了 <code>hexo-deployer-git</code> 插件。</p><p>老规矩，安装。</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git</span><br></pre></td></tr></table></figure><p>在 <code>_config.yml</code> 中配置。</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line">  <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line">  <span class="attr">repo:</span> <span class="string">你此前新建的仓库的链接</span> <span class="comment"># 比如：https://github.com/YunYouJun/yunyoujun.github.io</span></span><br><span class="line">  <span class="attr">branch:</span> <span class="string">master</span> <span class="comment"># 默认使用 master 分支</span></span><br><span class="line">  <span class="attr">message:</span> <span class="string">Update</span> <span class="string">Hexo</span> <span class="string">Static</span> <span class="string">Content</span> <span class="comment"># 你可以自定义此次部署更新的说明</span></span><br></pre></td></tr></table></figure><p>保存，部署！</p><blockquote><p>第一次可能需要你输入用户名与密码。密码输入的时候不会出现 ***，不要害怕，已经输入进去了。</p></blockquote><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo deploy</span><br></pre></td></tr></table></figure><p>等待完成后，打开网址 <code>https://你的名字.github.io</code> 就能看到你的线上网站了。</p><blockquote><p>使用 https，http 可能无法正常打开。HTTPS 是多了安全加密的 HTTP，Chrome 浏览器已经默认会显示 <code>http</code> 链接为不安全。为了安全，建议开启强制 https 跳转。<code>项目地址页面 -&gt; Settings -&gt; Options -&gt; GitHub Pages -&gt; Enforce HTTPS</code>。（翻到下面）此时，http 网址会自动重定向到 https</p></blockquote><h3 id="备份与自动部署">备份与自动部署<a class="fa-solid fa-hashtag" href="#备份与自动部署"></a></h3><p>我们当前只是将生成的静态文件部署到了云端。</p><p>为了以防万一，我们应该将网站的源代码文件也推送到 GitHub 仓库备份。</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">与远程 Git 仓库建立连接，只此一次即可</span></span><br><span class="line">git remote add origin https://github.com/你的用户名/你的名字.github.io</span><br></pre></td></tr></table></figure><p>接下来准备提交，这几句命令将是你以后每次备份所需要输入。</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">添加到缓存区</span></span><br><span class="line">git add -A</span><br><span class="line">git commit -m &quot;这次做了什么更改，简单描述下即可&quot;</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">推送至远程仓库</span></span><br><span class="line">git push</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">第一次提交，你可能需设置一下默认提交分支</span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">git push --set-upstream origin hexo</span></span><br></pre></td></tr></table></figure><p>每次推送都要输入这三条命令，你可能觉得有些麻烦。那么你可以编写 bash 脚本。</p><p>譬如，在根目录下新建 <code>update.sh</code>。</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">如果没有消息后缀，默认提交信息为 `:pencil: update content`</span></span><br><span class="line">info=$1</span><br><span class="line">if [&quot;$info&quot; = &quot;&quot;];</span><br><span class="line">then info=&quot;:pencil: update content&quot;</span><br><span class="line">fi</span><br><span class="line">git add -A</span><br><span class="line">git commit -m &quot;$info&quot;</span><br><span class="line">git push origin hexo</span><br></pre></td></tr></table></figure><p>此后更新的话，只需要在终端执行 <code>sh update.sh</code> 即可。</p><p>更新麻烦，每次部署也很麻烦，可以使用持续集成进行自动部署。</p><blockquote><p>什么是持续集成？持续集成是一种软件开发实践。对软件进行自动化构建，以此来发现错误。 Travis CI 就是一个线上持续集成服务的提供商。它可以拉取你每次推送到 GitHub 上的代码，然后根据你的要求对其进行构建。我们可以趁机让它自动生成网站静态文件，然后自动帮我们部署。除此之外，你还可以使用 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://help.github.com/en/actions/getting-started-with-github-actions/about-github-actions">GitHub Actions</a> ，<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.netlify.com/">Netlify</a> 等服务。 GitHub Actions 相比 Travis 等，自身便拥有仓库的 Token，不再需要额外设置，可以直接使用 <code>secrets.GITHUB_TOKEN</code>。推荐一个专门用来部署 gh-pages 的 Actions <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/peaceiris/actions-gh-pages">actions-gh-pages</a></p></blockquote><p>关于更多更具体的自动化部署方案和操作步骤，你可以参考我的小伙伴 ChrAlpha 的 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://blog.ichr.me/post/automated-deployment-of-serverless-static-blog/">初探无后端静态博客自动化部署方案</a>。</p><p>他在文章中详细介绍了 Netlify 、GitHub Actions 和 Travis CI 的部署方法。</p><p>你也可以参考 Hexo 的官方文档 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://hexo.io/zh-cn/docs/github-pages">将 Hexo 部署到 GitHub Pages</a></p><p>我就不在此画蛇添足。</p><hr><p>当然还有个更简便的方法，直接参考我的 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/YunYouJun/yunyoujun.github.io/blob/hexo/.github/workflows/gh-pages.yml">gh-pages.yml</a>。</p><p>去掉夹在 <code>yarn install</code> 与 <code>yarn build</code> 之间的 <code>algolia</code> 部分，直接粘贴到你的 <code>.github/workflows/</code> 文件夹（自己新建）下 <code>xxx.yml</code> 文件里即可。</p><p>推送后便可直接自动部署。</p><p>至此，你的站点便基本搭建完成，此后继续对主题进行自定义吧。</p><h3 id="开始写作">开始写作<a class="fa-solid fa-hashtag" href="#开始写作"></a></h3><h4 id="文章">文章<a class="fa-solid fa-hashtag" href="#文章"></a></h4><p>输入以下命令即可新建 <code>xxx.md</code> 文件。</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new post xxx</span><br></pre></td></tr></table></figure><blockquote><p><code>md</code> 是 <code>Markdown</code> 的后缀名，是一种简洁方便的文本标记语言。你只需要记住简单的几种语法，就可以快速进行编写。为什么使用 Markdown？首先 Hexo 本身就是将 Markdown 转化为静态的 Html 文件，来方便用户编写文章。 Markdown 就好似介于 Word 与 TXT 文本之间。Word 体积大、大部分功能实际上根本用不到，且最后的文档常常带有许多冗余信息。而 TXT 却无法实现加粗、标题、下划线、水平分割线等常用的功能。（这里所说的 TXT 只是一种纯文本格式的代称，实际上 Markdown 也是纯文本文件，不过通过语法和 Markdown 编译器，我们就可以看到一些简单的样式。）</p></blockquote><p>譬如本文就是通过 Markdown 编写。</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 一级标题</span></span><br><span class="line"></span><br><span class="line"><span class="section">## 二级标题</span></span><br><span class="line"></span><br><span class="line"><span class="strong">**加粗文字**</span></span><br></pre></td></tr></table></figure><blockquote><p>更多语法（虽然说是更多，但是其实也没多少）：<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/younghz/Markdown">Markdown 基本语法</a></p></blockquote><p>这是我写的一个 Markdown 样式：<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.yunyoujun.cn/star-markdown-css/">star-markdown-css</a></p><p>上面是渲染过后的效果，你可以与其 Markdown 的<a target="_blank" rel="noopener external nofollow noreferrer" href="https://raw.githubusercontent.com/YunYouJun/star-markdown-css/master/demo/md/demo.md">纯文本原文</a>进行对比。</p><h4 id="页面">页面<a class="fa-solid fa-hashtag" href="#页面"></a></h4><p>你可以新建一些自己的自定义页面。</p><p>譬如直接在 Hexo 目录下的 <code>source</code> 文件夹下直接新建 HTML 进行编写。</p><p>也可以通过以下命令来新建页面。（当然还是 Markdown，不过也是可以在 Markdown 里写 HTML 的，也会被渲染出来。）</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page xxx</span><br></pre></td></tr></table></figure><blockquote><p>至于对应的参数配置，请参考主题文档</p></blockquote><h2 id="FAQ">FAQ<a class="fa-solid fa-hashtag" href="#FAQ"></a></h2><h3 id="视频？">视频？<a class="fa-solid fa-hashtag" href="#视频？"></a></h3><p>没有视频，一是懒，二是文字更利于更新勘误。</p><p>以及文章中将会频繁出现参考链接，更方便使用。</p><h3 id="如何绑定你的自定义域名？">如何绑定你的自定义域名？<a class="fa-solid fa-hashtag" href="#如何绑定你的自定义域名？"></a></h3><p>首先，你得有个自己的域名。</p><blockquote><p>避免广告嫌疑，你可以自行前往相关域名提供商购买。<s>但是如果你有幸能看到谷歌广告（概率较小），可以考虑点一点。</s></p></blockquote><p>并使用 CNAME 解析到 <code>你的名字.github.io</code>。（当然 A 记录直接解析到 GitHub Pages IP 地址也可以。）</p><blockquote><p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://help.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain">Managing a custom domain for your GitHub Pages site</a></p></blockquote><p>在 <code>Hexo</code> 工作目录下 <code>source</code> 文件夹下新建 <code>CNAME</code> 文件（没有后缀名）。</p><blockquote><p>CNAME 即相当于告诉 GitHub 允许将 <a target="_blank" rel="noopener external nofollow noreferrer" href="http://xxx.github.io">xxx.github.io</a> 为你的域名提供服务。 source 目录下的文件除了特殊的 markdown 会被解析为 html，其余都会原样复制到生成的静态文件夹中。所以你需要在 source 文件夹下建有 CNAME，它会在生成静态文件时，将 CNAME 拷贝到静态文件夹并部署到 master 分支。如果只是在 GitHub 上设置（<code>项目地址页面 -&gt; Settings -&gt; Options -&gt; GitHub Pages -&gt; Custom domain</code>），它会自动添加到 master 分支上，但随后不包含 CNAME 的部署会将其覆盖。</p></blockquote><p>内容填写你的域名即可。</p><blockquote><p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://help.github.com/en/github/working-with-github-pages/about-custom-domains-and-github-pages">About custom domains and GitHub Pages</a></p></blockquote><h3 id="备案">备案<a class="fa-solid fa-hashtag" href="#备案"></a></h3><p>如果想要使用国内的一些服务，比如 CDN，不备案确实寸步难行。</p><p>此处我指的是 ICP 备案，并非公安备案。（实际上我从来没有进行过公安备案，且目前在使用服务时，并未受到任何相关限制。）</p><p>国内备案往往意味着你还需要一台国内的服务器，譬如通过腾讯云备案时会需要你设置关联的服务器（阿里云应当也是如此）。实际上你的网站并不一定得在这台服务器上，即便你只是免费试用了一个月，但是备案成功了，之后过期了对备案也不会有何影响。</p><blockquote><p>也就是说你完全可以使用学生优惠（10 元左右）购买一个月的云服务器，用于关联，并在这个月内抓紧备案好，此后云服务器过期不会影响备案问题。学生优惠的话 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.aliyun.com/minisite/goods?userCode=ixykjqj2">阿里云</a> 或者 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://url.cn/PLQYbz6n">腾讯云</a> 都有。</p></blockquote><p>备案前需要注意的几点就是：</p><ul><li>确定你的域名是否可以备案</li><li>关闭评论区</li><li>提交备案时的备注说明不得含有 <code>交流</code> 字样</li><li>首页不能含有其他网站的直达链接</li><li>遵纪守法无不良信息（这是当然的）</li></ul><p>你也可以直接关停网站，等待备案成功后再重新打开。（今后每年偶尔会复查，但相对会宽松许多。）</p><p>此后，按照网站指引的备案步骤一步步来即可。（以前还要等待幕布寄送拍照，现在可以直接在手机上人脸验证）</p><p>备案成功后页脚必须清晰地展示备案号，且备案号含有指向 <a target="_blank" rel="noopener external nofollow noreferrer" href="http://www.beian.miit.gov.cn/">http://www.beian.miit.gov.cn/</a> 的超链接。</p><h2 id="源文件备份">源文件备份<a class="fa-solid fa-hashtag" href="#源文件备份"></a></h2><h3 id="备份什么？">备份什么？<a class="fa-solid fa-hashtag" href="#备份什么？"></a></h3><p>百密总有一疏，因此我们需要做好博客源文件的备份，你固然可以直接将整个文件夹打包，但当你后续安装的插件越来越多，你会发现压缩或者解压耗时越来越长，实际上我们只需要备份<code>根目录</code>的几个文件（夹）即可，<code>source</code>文件夹（里面存放着你博客的主要资源），<code>_config.yml</code>（HEXO 的配置，如果你不升级 HEXO 的话，这个也是很重要的），然后就是<code>package.json</code>（和它的名字一样，他能告诉你你安装了哪些插件及其对应的版本），有了这些你就能在另外一台电脑上很快恢复你的博客环境（当然我本人采用了<code>Cloud Studio</code>作为临时环境，也是不错的）</p><p>我的<code>package.json</code>一览，如果其中一些插件你也有兴趣可以按照插件官方说明尝试，这里不做功能注释，虽然总会踩一些奇奇怪怪的坑，但当你慢慢修正时，虽然很折腾，但的确是乐在其中</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;hexo-site&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;version&quot;</span><span class="punctuation">:</span> <span class="string">&quot;0.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;private&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;build&quot;</span><span class="punctuation">:</span> <span class="string">&quot;hexo generate&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;clean&quot;</span><span class="punctuation">:</span> <span class="string">&quot;hexo clean&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;deploy&quot;</span><span class="punctuation">:</span> <span class="string">&quot;hexo deploy&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;server&quot;</span><span class="punctuation">:</span> <span class="string">&quot;hexo server&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;hexo&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;version&quot;</span><span class="punctuation">:</span> <span class="string">&quot;5.0.0&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;dependencies&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;cheerio&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.0.0-rc.3&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;cnpm&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^6.1.1&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;gulp-htmlmin&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^5.0.1&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^5.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-abbrlink&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^2.2.1&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-baidu-url-submit&quot;</span><span class="punctuation">:</span> <span class="string">&quot;0.0.6&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-deployer-git&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^2.1.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-feed&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.0.2&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-generator-archive&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-generator-baidu-sitemap&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^0.1.9&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-generator-category&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-generator-index&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-generator-search&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^2.4.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-generator-sitemap&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^2.1.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-generator-tag&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-render-pug&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^2.1.4&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-renderer-ejs&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-renderer-marked&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^3.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-renderer-pug&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-renderer-stylus&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.1.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-server&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-tag-aplayer&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^3.0.4&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;hexo-wordcount&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^6.0.1&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;imagemin&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^7.0.1&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;npm-check&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^5.9.2&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;terser&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^4.8.0&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;devDependencies&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;gulp&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^4.0.2&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;gulp-clean-css&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^4.3.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;gulp-htmlclean&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^2.7.22&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;gulp-imagemin&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^7.1.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;gulp-uglify&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^3.0.2&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;workbox-build&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^5.1.3&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><h3 id="备份方式">备份方式<a class="fa-solid fa-hashtag" href="#备份方式"></a></h3><p>不能在一棵树上吊死，所以我选择了多平台备份，分别是 Github,Gitee,Coding 三个平台，多一个平台，多一份保障，这里注册账号实名认证什么的不再赘述，大家应该都会，注意的一点就是我们建的仓库选择<code>**私有仓库**</code>，不然别人把你 md 一拷走，就成别人的的了，不过大多数人比较自觉，我们这静态博客，F12 源码什么的也看的清清楚楚，爬走很简单，主要靠自觉，防止转载（其实无所谓，秉着开源共享的理念，其实标明出处大家也就不会特别在意）</p><p>首先在博客<code>根目录</code>使用以下命令初始化本地仓库添加一个远程仓库</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git init</span><br></pre></td></tr></table></figure><blockquote><p>如果本地未显示.git 文件夹，请注意打开显示隐藏文件夹</p></blockquote><p>然后运行 <code>git remote add &lt;shortname&gt; &lt;url&gt;</code> 添加一个新的远程 Git 仓库，同时指定一个方便使用的简写：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git remote add &lt;shortname&gt; &lt;url&gt;</span><br></pre></td></tr></table></figure><p>比如 <code>git remote add origin git@github.com:CCKNBC/Hexo.git</code>，添加多个仓库地址等更多操作请参考<strong>Git-基础-远程仓库的使用</strong>，按照个人喜好来添加多个仓库地址，我这里全部使用的 origin,通过手动添加了 coding,gitee 的仓库地址，不影响使用就行</p><p>然后我们运行<code>git remote -v</code>查看一下结果，是自己想要的即可</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">origin  git@github.com:CCKNBC/Hexo.git (fetch)</span><br><span class="line">origin  git@github.com:CCKNBC/Hexo.git (push)</span><br><span class="line">origin  git@e.coding.net:ccknbc/blog/source.git (push)</span><br><span class="line">origin  git@gitee.com:ccknbc/blog.git (push)</span><br></pre></td></tr></table></figure><p>然后我们就可以推送对应的内容了</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">git pull</span><br><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">&quot;%date% %time%: Updated By CCKNBC Local&quot;</span></span><br><span class="line">git push origin -u</span><br></pre></td></tr></table></figure><blockquote><p>上面<code>git push origin -u</code>这个是因为第一次推送，我们采取强制推送，如果还是不行我们<code>git push origin -f</code>（因为是第一次无所谓，以后请不要随意使用-f），以后我们只需要<code>git push</code>即可，同时 commit 的内容请根据实际需要自行修改</p></blockquote><p>以下是我的<code>.git/config</code>一览,设置好后你可以更换你的第一个 url，也就是 fetch 仓库，根据个人喜好来（或者说网络原因），下面使用的是 github 的，那么 git pull 等操作就会按照这个仓库来和本地做比较，选择一个连接比较快的就好</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">[core]</span><br><span class="line">	repositoryformatversion = 0</span><br><span class="line">	filemode = false</span><br><span class="line">	bare = false</span><br><span class="line">	logallrefupdates = true</span><br><span class="line">	symlinks = false</span><br><span class="line">	ignorecase = true</span><br><span class="line">[remote &quot;origin&quot;]</span><br><span class="line">	url = git@github.com:CCKNBC/Hexo.git</span><br><span class="line">	fetch = +refs/heads/*:refs/remotes/origin/*</span><br><span class="line">	url = git@e.coding.net:ccknbc/blog/source.git</span><br><span class="line">	url = git@gitee.com:ccknbc/blog.git</span><br><span class="line">[branch &quot;master&quot;]</span><br><span class="line">	remote = origin</span><br><span class="line">	merge = refs/heads/master</span><br></pre></td></tr></table></figure><p>在上面的添加多个仓库中，个人因为懒的输入命令，所以直接手动添加的下面两行，反正目的达到就行</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">url = git@e.coding.net:ccknbc/blog/source.git</span><br><span class="line">url = git@gitee.com:ccknbc/blog.git</span><br></pre></td></tr></table></figure><p>然后在配置好公钥的情况下，强制推送即可，至此，你的博客源文件已经推送至你的备份仓库，可以去查看是否有一条强制推送的 commit 记录了，同时检查是否有<code>theme</code>文件夹（因为涉及到后面的魔改，部分源文件修改，因此我们也做好备份），如果没有，检查主题文件夹是否有<code>.git</code>文件夹，删掉后再次推送即可</p><h2 id="如何优雅的魔改">如何优雅的魔改<a class="fa-solid fa-hashtag" href="#如何优雅的魔改"></a></h2><p>在不动主题源文件方便日后升级的情况下，我们大部分采用外部引入 css,js 的方式实现，同时上传至 github，借用 jsDelivr 提供的 CDN 加速服务快速引用</p><p>在博客根目录<code>source</code>文件夹下新建一个<code>xxx.js</code>和<code>xxx.css</code>，名字自己取就行，最后我们正确引入即可，在主题配置文件<code>butterfly.yml</code>（下文将直接简写根配（根目录的_confg.yml），主配（主题配置<code>source</code>目录下的 butterfly.yml））搜索 inject,然后在以下位置插入对应的 css 和 js 即可，例如，我是存放在主题文件夹子文件夹 css 和 js 内</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;https://cdn.jsdelivr.net/gh/CCKNBC/ccknbc.github.io@latest/css/ccknbc.css&quot;&gt;</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">src=&quot;https://cdn.jsdelivr.net/gh/CCKNBC/ccknbc.github.io@latest/js/ccknbc.js&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure><p>所以按照上面所说的对应的你的链接即为，其中<code>your name</code>是你的 github 用户名，请注意根据具体路径变通</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">https://cdn.jsdelivr.net/gh/your name/your name.github.io@latest/xxx.css</span><br><span class="line">https://cdn.jsdelivr.net/gh/your name/your namec.github.io@latests/xxx.js</span><br></pre></td></tr></table></figure><p>若是本地预览就可使用（请根据路径自己修改）</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">/css/ccknbc.css</span><br><span class="line">/js/ccknbc.js</span><br></pre></td></tr></table></figure><p>接下来分别编辑 css 和 js 文件即可，当然你可以直接复制粘贴或者直接引用我的链接</p><p><code>**css**</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&quot;sleek&quot;</span>;</span><br><span class="line">  <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&quot;https://cdn.jsdelivr.net/gh/lete114/CDN2/zaxiang/sleek.woff2&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*标题颜色修改*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#site_title</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#8fbc8f</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#site-name</span><span class="selector-class">.blog_title</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#8fbc8f</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 滚动条 */</span></span><br><span class="line"></span><br><span class="line">::-webkit-scrollbar &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">::-webkit-scrollbar-thumb &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#8fbc8f</span>;</span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">-webkit-linear-gradient</span>(</span><br><span class="line">    <span class="number">45deg</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.4</span>) <span class="number">25%</span>,</span><br><span class="line">    transparent <span class="number">25%</span>,</span><br><span class="line">    transparent <span class="number">50%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.4</span>) <span class="number">50%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.4</span>) <span class="number">75%</span>,</span><br><span class="line">    transparent <span class="number">75%</span>,</span><br><span class="line">    transparent</span><br><span class="line">  );</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">2em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">::-webkit-scrollbar-corner &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: transparent;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">::-moz-selection &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#8fbc8f</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#web_bg</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">-webkit-linear-gradient</span>(</span><br><span class="line">    <span class="number">0deg</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">  );</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">-moz-linear-gradient</span>(</span><br><span class="line">    <span class="number">0deg</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">  );</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">-o-linear-gradient</span>(</span><br><span class="line">    <span class="number">0deg</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">  );</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">-ms-linear-gradient</span>(</span><br><span class="line">    <span class="number">0deg</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">  );</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(</span><br><span class="line">    <span class="number">90deg</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">    <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.layout_post</span> &gt; <span class="selector-id">#post</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 鼠标图标 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">cursor</span>: <span class="built_in">url</span>(<span class="string">https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/Jkll8I.png</span>), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*a标签*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">cursor</span>: <span class="built_in">url</span>(<span class="string">https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png</span>), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*按钮*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">button</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">cursor</span>: <span class="built_in">url</span>(<span class="string">https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png</span>), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*i标签*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">i</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">cursor</span>: <span class="built_in">url</span>(<span class="string">https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png</span>), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*页脚a标签*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* #footer-wrap a:hover &#123;</span></span><br><span class="line"><span class="comment">    text-decoration: none;</span></span><br><span class="line"><span class="comment">    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;</span></span><br><span class="line"><span class="comment">&#125; */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*分页器*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-id">#pagination</span> <span class="selector-class">.page-number</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">cursor</span>: <span class="built_in">url</span>(<span class="string">https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png</span>), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*头部的导航栏*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.site-page</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">cursor</span>: <span class="built_in">url</span>(<span class="string">https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png</span>), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* a(链接)标签的默认颜色 */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 宽度大于800小于9999执行 */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* @media only screen and (min-width: 800px) and (max-width: 9999px) &#123;</span></span><br><span class="line"><span class="comment">    </span></span><br><span class="line"><span class="comment">    #article-container a &#123;</span></span><br><span class="line"><span class="comment">        color: #00c4b6;</span></span><br><span class="line"><span class="comment">        display: inline-block;</span></span><br><span class="line"><span class="comment">        position: relative;</span></span><br><span class="line"><span class="comment">    &#125;</span></span><br><span class="line"><span class="comment">&#125; */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 打造效果渐变 */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">@-webkit-keyframes</span> Gradient &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">50%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">100%</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">100%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@-moz-keyframes</span> Gradient &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">50%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">100%</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">100%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> Gradient &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">50%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">100%</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">100%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#subtitle</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(</span><br><span class="line">    -<span class="number">45deg</span>,</span><br><span class="line">    <span class="number">#ffecd2</span>,</span><br><span class="line">    <span class="number">#fcb69f</span>,</span><br><span class="line">    <span class="number">#84fab0</span>,</span><br><span class="line">    <span class="number">#8fd3f4</span>,</span><br><span class="line">    <span class="number">#fddb92</span>,</span><br><span class="line">    <span class="number">#d1fdff</span>,</span><br><span class="line">    <span class="number">#e4afcb</span>,</span><br><span class="line">    <span class="number">#7edbdc</span>,</span><br><span class="line">    <span class="number">#eea2a2</span>,</span><br><span class="line">    <span class="number">#7ac5d8</span></span><br><span class="line">  );</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">400%</span> <span class="number">400%</span>;</span><br><span class="line">  -webkit-<span class="attribute">animation</span>: Gradient <span class="number">10s</span> ease infinite;</span><br><span class="line">  -moz-<span class="attribute">animation</span>: Gradient <span class="number">10s</span> ease infinite;</span><br><span class="line">  <span class="attribute">animation</span>: Gradient <span class="number">10s</span> ease infinite;</span><br><span class="line">  -o-user-select: none;</span><br><span class="line">  -ms-user-select: none;</span><br><span class="line">  -webkit-user-select: none;</span><br><span class="line">  -moz-user-select: none;</span><br><span class="line">  user-select: none;</span><br><span class="line">  -webkit-<span class="attribute">background-clip</span>: text;</span><br><span class="line">  -webkit-text-fill-<span class="attribute">color</span>: transparent;</span><br><span class="line">  <span class="attribute">border-top-left-radius</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">border-top-right-radius</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#subtitle</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><code>**js**</code></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置页脚博主会动的心</span></span><br><span class="line">$(<span class="variable language_">document</span>).<span class="title function_">ready</span>(<span class="keyword">function</span> (<span class="params">e</span>) &#123;</span><br><span class="line">  $(<span class="string">&quot;.copyright&quot;</span>).<span class="title function_">html</span>(</span><br><span class="line">    <span class="string">&#x27;©2020 &lt;i style=&quot;color:#49B1F5;animation: announ_animation 0.8s linear infinite;&quot; class=&quot;fa fa-heartbeat&quot;&gt;&lt;/i&gt; CC康纳百川&#x27;</span></span><br><span class="line">  );</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (<span class="title function_">aidaori</span>()) &#123;</span><br><span class="line">  $(<span class="string">&quot;html&quot;</span>).<span class="title function_">css</span>(&#123;</span><br><span class="line">    <span class="attr">filter</span>: <span class="string">&quot;gray !important&quot;</span>,</span><br><span class="line">    <span class="attr">filter</span>: <span class="string">&quot;progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)&quot;</span>,</span><br><span class="line">    <span class="attr">filter</span>: <span class="string">&quot;grayscale(100%)&quot;</span>,</span><br><span class="line">    <span class="string">&quot;-webkit-filter&quot;</span>: <span class="string">&quot;grayscale(100%)&quot;</span>,</span><br><span class="line">    <span class="string">&quot;-moz-filter&quot;</span>: <span class="string">&quot;grayscale(100%)&quot;</span>,</span><br><span class="line">    <span class="string">&quot;-ms-filter&quot;</span>: <span class="string">&quot;grayscale(100%)&quot;</span>,</span><br><span class="line">    <span class="string">&quot;-o-filter&quot;</span>: <span class="string">&quot;grayscale(100%)&quot;</span>,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//在特定日期变灰</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">aidaori</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> aidaoriarr = <span class="keyword">new</span> <span class="title class_">Array</span>(</span><br><span class="line">    <span class="string">&quot;0403&quot;</span>,</span><br><span class="line">    <span class="string">&quot;0404&quot;</span>,</span><br><span class="line">    <span class="string">&quot;0405&quot;</span>,</span><br><span class="line">    <span class="string">&quot;0406&quot;</span>,</span><br><span class="line">    <span class="string">&quot;0414&quot;</span>,</span><br><span class="line">    <span class="string">&quot;0512&quot;</span>,</span><br><span class="line">    <span class="string">&quot;0807&quot;</span>,</span><br><span class="line">    <span class="string">&quot;0909&quot;</span>,</span><br><span class="line">    <span class="string">&quot;1213&quot;</span></span><br><span class="line">  );</span><br><span class="line">  <span class="comment">//2020年4月4日 新冠肺炎哀悼日，清明节</span></span><br><span class="line">  <span class="comment">//2010年4月14日，青海玉树地震</span></span><br><span class="line">  <span class="comment">//2008年5月12日，四川汶川地震</span></span><br><span class="line">  <span class="comment">//2010年8月7日，甘肃舟曲特大泥石流</span></span><br><span class="line">  <span class="comment">//1976年9月9日，毛泽东逝世</span></span><br><span class="line">  <span class="comment">//1937年12月13日，南京大屠杀</span></span><br><span class="line">  <span class="keyword">var</span> mydate = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line">  <span class="keyword">var</span> str = <span class="string">&quot;&quot;</span>; <span class="comment">// + mydate.getFullYear();</span></span><br><span class="line">  <span class="keyword">var</span> mm = mydate.<span class="title function_">getMonth</span>() + <span class="number">1</span>;</span><br><span class="line">  <span class="keyword">if</span> (mydate.<span class="title function_">getMonth</span>() &gt; <span class="number">9</span>) &#123;</span><br><span class="line">    str += mm;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    str += <span class="string">&quot;0&quot;</span> + mm;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (mydate.<span class="title function_">getDate</span>() &gt; <span class="number">9</span>) &#123;</span><br><span class="line">    str += mydate.<span class="title function_">getDate</span>();</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    str += <span class="string">&quot;0&quot;</span> + mydate.<span class="title function_">getDate</span>();</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (aidaoriarr.<span class="title function_">indexOf</span>(str) &gt; -<span class="number">1</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 可爱的Title</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">OriginTitle</span> = <span class="variable language_">document</span>.<span class="property">title</span>;</span><br><span class="line"><span class="keyword">var</span> titleTime;</span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;visibilitychange&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="property">hidden</span>) &#123;</span><br><span class="line">    $(<span class="string">&#x27;[rel=&quot;icon&quot;]&#x27;</span>).<span class="title function_">attr</span>(</span><br><span class="line">      <span class="string">&quot;href&quot;</span>,</span><br><span class="line">      <span class="string">&quot;https://cdn.jsdelivr.net/gh/CCKNBC/CDN/logo/ccknbc.png&quot;</span></span><br><span class="line">    );</span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">title</span> = <span class="string">&quot;(つェ⊂) 我藏好了哦~~&quot;</span>;</span><br><span class="line">    <span class="built_in">clearTimeout</span>(titleTime);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    $(<span class="string">&#x27;[rel=&quot;icon&quot;]&#x27;</span>).<span class="title function_">attr</span>(</span><br><span class="line">      <span class="string">&quot;href&quot;</span>,</span><br><span class="line">      <span class="string">&quot;https://cdn.jsdelivr.net/gh/CCKNBC/CDN/logo/favicon.svg&quot;</span></span><br><span class="line">    );</span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">title</span> = <span class="string">&quot;(*´∇｀*) 被你发现啦~~&quot;</span> + <span class="title class_">OriginTitle</span>;</span><br><span class="line">    titleTime = <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">document</span>.<span class="property">title</span> = <span class="title class_">OriginTitle</span>;</span><br><span class="line">    &#125;, <span class="number">2000</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>更多类容可以百度，自己 DIY，有想法当然要实现啊</p><hr><h2 id="未完待续…">未完待续…<a class="fa-solid fa-hashtag" href="#未完待续…"></a></h2></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://blog.ccknbc.cc/">CC康纳百川</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://blog.ccknbc.cc/posts/hexo-toss/">https://blog.ccknbc.cc/posts/hexo-toss/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><i style="color:#8fbc8f" class="fa-brands fa-creative-commons"></i> <i style="color:#8fbc8f" class="fa-brands fa-creative-commons-by"></i> <i style="color:#8fbc8f" class="fa-brands fa-creative-commons-nc"></i> <i style="color:#8fbc8f" class="fa-brands fa-creative-commons-sa"></i> CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://blog.ccknbc.cc">CC的部落格</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a></div><div class="post_share"><div class="social-share" data-image="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/45d888bd81b86777b3364e4a16ff72c6_w2240_h1260_s476.jpg" data-sites="wechat,weibo,qq,facebook,twitter"></div><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://jsd.cdn.zzko.cn/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i>赞赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://www.rocschool.com/tool/qr/qr/id/51.html" rel="external nofollow noreferrer" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/qr.png" alt="三合一"></a><div class="post-qr-code-desc">三合一</div></li><li class="reward-item"><a href="https://afdian.net/@ccknbc" rel="external nofollow noreferrer" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/afdian.png" alt="爱发电"></a><div class="post-qr-code-desc">爱发电</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/production-practice/" title="生产实习"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/5bcc1fd0cc7119c390ab4a548a8e795b_w2240_h1260_s2562.jpg" onerror='onerror=null,src="https://jsd.cdn.zzko.cn/npm/hexo-theme-anzhiyu/source/img/friend_404.gif"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">生产实习</div></div></a></div><div class="next-post pull-right"><a href="/posts/implementation-of-simple-browser-update-push/" title="简单浏览器更新推送的实现"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/42a535535c03bb6e4e10f2d2501b3e36_w2240_h1260_s2693.jpg" onerror='onerror=null,src="https://jsd.cdn.zzko.cn/npm/hexo-theme-anzhiyu/source/img/friend_404.gif"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">简单浏览器更新推送的实现</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/hexo-webpushr-notification/" title="Hexo浏览器定向推送文章更新"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/d2a947d48815ed24936a919873b97841_w1366_h768_s31.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-05</div><div class="title">Hexo浏览器定向推送文章更新</div></div></a></div><div><a href="/posts/yuque-to-hexo/" title="语雀文章同步至Hexo笔记"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/721e476cb2661152b9c43621c94e3ed7_w1366_h768_s86.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-04</div><div class="title">语雀文章同步至Hexo笔记</div></div></a></div><div><a href="/posts/how-to-hide-hexo-articles-gracefully/" title="如何优雅隐藏 Hexo 文章"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/aa5ebc0731a66fa5fb73df76da759ae3_w1920_h1080_s557.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-10-22</div><div class="title">如何优雅隐藏 Hexo 文章</div></div></a></div><div><a href="/posts/google-adsense-configuration-manual/" title="Google Adsense 配置手册"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/0a77436f677dd11422579e07ba6423b3_w1920_h1080_s188.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-10-24</div><div class="title">Google Adsense 配置手册</div></div></a></div><div><a href="/posts/introduction-of-plugin-tags-based-on-butterfly/" title="Hexo标签笔记"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/666ccfeb387717d69a0e3333cc1170dc_w1004_h591_s48.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-03-05</div><div class="title">Hexo标签笔记</div></div></a></div><div><a href="/posts/the-webp-road-of-blog-pictures/" title="博客图片的 WebP 之路"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/a4d78fbe1ca6e99e19535a095681c5ba_w1920_h1080_s770.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-11-29</div><div class="title">博客图片的 WebP 之路</div></div></a></div></div></div><hr class="custom-hr"><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="waline-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%90%AD%E5%BB%BA%E6%AD%A5%E9%AA%A4"><span class="toc-number">1.</span> <span class="toc-text">搭建步骤</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Node-js"><span class="toc-number">1.1.</span> <span class="toc-text">安装 Node.js</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Git-%E4%B8%8E-GitHub"><span class="toc-number">1.2.</span> <span class="toc-text">Git 与 GitHub</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Git"><span class="toc-number">1.2.1.</span> <span class="toc-text">安装 Git</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%A8%E5%86%8C-GitHub"><span class="toc-number">1.2.2.</span> <span class="toc-text">注册 GitHub</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Hexo"><span class="toc-number">1.3.</span> <span class="toc-text">安装 Hexo</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BB%E9%A2%98%E5%AE%89%E8%A3%9D"><span class="toc-number">1.4.</span> <span class="toc-text">主题安裝</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8-Hexo-%E4%B8%BB%E9%A2%98"><span class="toc-number">1.5.</span> <span class="toc-text">使用 Hexo 主题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Git-%E5%AE%89%E8%A3%85"><span class="toc-number">1.6.</span> <span class="toc-text">Git 安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#npm-%E5%AE%89%E8%A3%85"><span class="toc-number">1.7.</span> <span class="toc-text">npm 安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BA%94%E7%94%A8%E4%B8%BB%E9%A2%98"><span class="toc-number">1.8.</span> <span class="toc-text">应用主题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%94%9F%E6%88%90%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6"><span class="toc-number">1.9.</span> <span class="toc-text">生成静态文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8E%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93%E5%BB%BA%E7%AB%8B%E5%85%B3%E8%81%94"><span class="toc-number">1.10.</span> <span class="toc-text">与远程仓库建立关联</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%83%A8%E7%BD%B2"><span class="toc-number">1.11.</span> <span class="toc-text">部署</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%87%E4%BB%BD%E4%B8%8E%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2"><span class="toc-number">1.12.</span> <span class="toc-text">备份与自动部署</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%80%E5%A7%8B%E5%86%99%E4%BD%9C"><span class="toc-number">1.13.</span> <span class="toc-text">开始写作</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%87%E7%AB%A0"><span class="toc-number">1.13.1.</span> <span class="toc-text">文章</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2"><span class="toc-number">1.13.2.</span> <span class="toc-text">页面</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#FAQ"><span class="toc-number">2.</span> <span class="toc-text">FAQ</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A7%86%E9%A2%91%EF%BC%9F"><span class="toc-number">2.1.</span> <span class="toc-text">视频？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E7%BB%91%E5%AE%9A%E4%BD%A0%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%EF%BC%9F"><span class="toc-number">2.2.</span> <span class="toc-text">如何绑定你的自定义域名？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%87%E6%A1%88"><span class="toc-number">2.3.</span> <span class="toc-text">备案</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%BA%90%E6%96%87%E4%BB%B6%E5%A4%87%E4%BB%BD"><span class="toc-number">3.</span> <span class="toc-text">源文件备份</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%87%E4%BB%BD%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-number">3.1.</span> <span class="toc-text">备份什么？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%87%E4%BB%BD%E6%96%B9%E5%BC%8F"><span class="toc-number">3.2.</span> <span class="toc-text">备份方式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E4%BC%98%E9%9B%85%E7%9A%84%E9%AD%94%E6%94%B9"><span class="toc-number">4.</span> <span class="toc-text">如何优雅的魔改</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%AA%E5%AE%8C%E5%BE%85%E7%BB%AD%E2%80%A6"><span class="toc-number">5.</span> <span class="toc-text">未完待续…</span></a></li></ol></div></div></div></div></main><footer id="footer" style="background:linear-gradient(135deg,#fff1eb,#ace0f9)"><div id="footer-wrap"><div class="icp"><a target="_blank" rel="noopener external nofollow noreferrer" href="https://beian.miit.gov.cn"><img class="icp-icon" src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/icp.png" alt="ICP"><span>鄂 ICP 备 2020019764 号</span></a></div><div class="gongan"><a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42088102000092"><img class="gongan-icon" src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/gongan.png" alt="gongan"><span>鄂公网安备 42088102000092 号</span></a></div><div class="live"><span>本站已运行</span><span id="display_live"></span><span class="moe-text">CCKNBC All Rights Reserved.</span><script>function blog_live(){window.setTimeout(blog_live,1e3);var e=new Date("2020-06-04T00:00:00"),o=new Date,l=o.getFullYear(),o=o.getTime()-e.getTime(),e=864e5,t=365*e,i=Math.floor(o/t),t=Math.floor(o%t/e),e=Math.floor(o%e/60/60/1e3),a=Math.floor(o%36e5/60/1e3),o=Math.floor(o%6e4/1e3);display_live.innerHTML=" "+i+" 年 "+t+" 天 "+e+" 小时 "+a+" 分 "+o+" 秒<br>&copy; 2020 - "+l+" "}blog_live()</script></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><a class="edit-yuque" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.yuque.com/ccknbc/blog/-3/edit/" title="在语雀上以富文本格式编辑/预览 - HEXO 折腾"><i class="fa-solid fa-crow"></i></a><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fa-solid fa-arrows-alt-h"></i></button><button id="readmode" type="button" title="阅读模式"><i class="fa-solid fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fa-solid fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fa-solid fa-cog"></i></button><button id="share-link" type="button" title="分享链接"><i class="fa-solid fa-share"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fa-solid fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fa-solid fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fa-solid fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://jsd.cdn.zzko.cn/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.js"></script><script src="https://jsd.cdn.zzko.cn/npm/instant.page/instantpage.js" type="module"></script><script src="https://jsd.cdn.zzko.cn/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://jsd.cdn.zzko.cn/npm/node-snackbar/dist/snackbar.min.js"></script><div class="js-pjax"><script>(()=>{var e=()=>{var e;const t=document.querySelectorAll("#article-container .mermaid-wrap");0!==t.length&&(e=()=>{{var e=t;window.loadMermaid=!0;const a="dark"===document.documentElement.getAttribute("data-theme")?"dark":"default";Array.from(e).forEach((e,t)=>{const n=e.firstElementChild;e="%%{init:{ 'theme':'"+a+"'}}%%\n"+n.textContent;const d=mermaid.render("mermaid-"+t,e);"string"==typeof d?(t=d,n.insertAdjacentHTML("afterend",t)):d.then(({svg:e})=>{n.insertAdjacentHTML("afterend",e)})})}},btf.addGlobalFn("themeChange",e,"mermaid"),window.loadMermaid?e():btf.getScript("https://jsd.cdn.zzko.cn/npm/mermaid/dist/mermaid.min.js").then(e))};btf.addGlobalFn("encrypt",e,"mermaid"),window.pjax?e():document.addEventListener("DOMContentLoaded",e)})()</script><script>(()=>{let n=window.walineFn||null;const t=e=>{const n=e(Object.assign({el:"#waline-wrap",serverURL:"https://waline.ccknbc.cc",pageview:!1,dark:'html[data-theme="dark"]',path:window.location.pathname,comment:!1,imageUploader:function(e){var n=new FormData,t=new Headers;return n.append("file",e),n.append("album_id","10"),n.append("permission","0"),t.append("Authorization","Bearer 24|o8Crl5y0oK3luyUs17fBxDtAcevk1iiLHVFMNjpA"),t.append("Accept","application/json"),fetch("https://wmimg.com/api/v1/upload",{method:"POST",headers:t,body:n}).then(e=>e.json()).then(e=>e.data.links.url)}},{pageSize:10,meta:["nick","mail","link"],requiredMeta:["nick","mail"],login:"force",copyright:!0,search:!0,turnstileKey:"0x4AAAAAAAECBl27OB5SZrQT",locale:{admin:"博主",sofa:"这里冷冷清清的，快来留下脚印吧！",placeholder:"根据《互联网跟帖评论服务管理规定》，将展示您的归属地，并开启强制注册登录后才允许评论\n社交登录现已支持【QQ Weibo GitHub X Facebook】等平台，登录后可点击头像更改个人主页地址，方便CC串门\n在评论框粘贴图片，自动上传至图床，请不要将评论区作为您的图床，更不要上传违法图片，谢谢合作",reactionTitle:"就现在，表明你的态度！",reaction0:"鼓励",reaction1:"菜狗",reaction2:"正确",reaction3:"错误",reaction4:"思考",reaction5:"无聊",level0:"买菜",level1:"切菜",level2:"炒菜",level3:"煲汤",level4:"煮面",level5:"上桌",level6:"开吃"},emoji:["https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/"],reaction:["https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/鼓掌.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/菜狗.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/正确.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/错误.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/思考.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/睡觉.png"]}));btf.addGlobalFn("pjax",()=>{n.destroy()},"destroyWaline")};var e=()=>{n?t(n):(btf.getCSS("https://jsd.cdn.zzko.cn/npm/@waline/client/dist/waline.css"),btf.getCSS("https://jsd.cdn.zzko.cn/npm/@waline/client/dist/waline-meta.css").then(()=>import("https://jsd.cdn.zzko.cn/npm/@waline/client/dist/waline.js")).then(({init:e})=>{n=e||Waline.init,t(n),window.walineFn=n}))};btf.loadComment(document.getElementById("waline-wrap"),e)})()</script></div><script>window.addEventListener("load",()=>{const t=e=>e=""!==e&&150<(e=(e=(e=(e=e.replace(/<img.*?src="(.*?)"?[^\>]+>/gi,"[图片]")).replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,"[链接]")).replace(/<pre><code>.*?<\/pre>/gi,"[代码]")).replace(/<[^>]+>/g,"")).length?e.substring(0,150)+"...":e,a=t=>{let a="";if(t.length)for(let e=0;e<t.length;e++)a=(a+="<div class='aside-list-item'>")+`<div class='content'>
        <a class='comment' href='${t[e].url}' title='${t[e].content}'>${t[e].content}</a>
        <div class='name'><span>${t[e].nick} / </span><time datetime="${t[e].date}">${btf.diffDate(t[e].date,!0)}</time></div>
        </div></div>`;else a+="没有评论";var e=document.querySelector("#card-newest-comments .aside-list");e&&(e.innerHTML=a),window.lazyLoadInstance&&window.lazyLoadInstance.update(),window.pjax&&window.pjax.refresh(e)};var e=()=>{var e;document.querySelector("#card-newest-comments .aside-list")&&((e=btf.saveToLocal.get("waline-newest-comments"))?a(JSON.parse(e)):(async()=>{try{var e=(await(await fetch("https://waline.ccknbc.cc/api/comment?type=recent&count=3",{method:"GET"})).json()).data.map(e=>({content:t(e.comment),avatar:e.avatar,nick:e.nick,url:e.url+"#post-comment",date:e.time||e.insertedAt}));btf.saveToLocal.set("waline-newest-comments",JSON.stringify(e),10/1440),a(e)}catch(e){console.error(e),document.querySelector("#card-newest-comments .aside-list").textContent="无法获取评论，请确认相关配置是否正确"}})())};e(),btf.addGlobalFn("pjaxComplete",e,"waline_newestComment")})</script><script defer src="/js/custom.js"></script><script src="https://jsd.cdn.zzko.cn/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors=["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"];var pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!1,scrollRestoration:!1});const triggerPjaxFn=e=>{e&&Object.values(e).forEach(e=>{e()})};document.addEventListener("pjax:send",function(){btf.removeGlobalFnEvent("pjax"),btf.removeGlobalFnEvent("themeChange");var e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode"),triggerPjaxFn(window.globalFn.pjaxSend)}),document.addEventListener("pjax:complete",()=>{document.querySelectorAll("script[data-pjax]").forEach(e=>{const t=document.createElement("script");var a=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach(e=>t.setAttribute(e.name,e.value)),t.appendChild(document.createTextNode(a)),e.parentNode.replaceChild(t,e)}),triggerPjaxFn(window.globalFn.pjaxComplete)}),document.addEventListener("pjax:error",e=>{404===e.request.status&&pjax.loadUrl("/404")})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div class="docsearch-wrap"><div id="docsearch" style="display:none"></div><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/@docsearch/css/dist/style.css"><script src="https://jsd.cdn.zzko.cn/npm/@docsearch/js/dist/umd/index.js"></script><script>(()=>{docsearch(Object.assign({appId:"97MUPN4DMC",apiKey:"a003a39f337f5186ec11f5f92bae62b3",indexName:"ccknbc",container:"#docsearch"},{placeholder:"Ctrl/⌘ + K 唤醒搜索服务",maxResultsPerGroup:7,translations:{button:{buttonText:"搜索",buttonAriaLabel:"搜索"},modal:{searchBox:{resetButtonTitle:"清空",resetButtonAriaLabel:"清空",cancelButtonText:"取消",cancelButtonAriaLabel:"取消"},startScreen:{recentSearchesTitle:"最近搜索历史",noRecentSearchesText:"搜索历史为空",saveRecentSearchButtonTitle:"保存搜索记录",removeRecentSearchButtonTitle:"清除搜索记录",favoriteSearchesTitle:"收藏夹",removeFavoriteSearchButtonTitle:"移出收藏夹"},errorScreen:{titleText:"未能获取搜索结果",helpText:"您可能需要检查您的网络连接"},footer:{selectText:"选择",selectKeyAriaLabel:"回车键",navigateText:"切换",navigateUpKeyAriaLabel:"方向键上",navigateDownKeyAriaLabel:"方向键下",closeText:"关闭",closeKeyAriaLabel:"退出键",searchByText:"搜索服务提供: DocSearch by"},noResultsScreen:{noResultsText:"未搜索到相关内容",suggestedQueryText:"您可尝试搜索",reportMissingResultsText:"确认搜索结果是正确的？",reportMissingResultsLinkText:"反馈给Algolia"}}}}));const e=()=>{document.querySelector(".DocSearch-Button").click()};var t=()=>{btf.addEventListenerPjax(document.querySelector("#search-button > .search"),"click",e)};t(),window.addEventListener("pjax:complete",t)})()</script></div></div><script>const copyright_enable=!0</script><script src="https://jsd.cdn.zzko.cn/npm/turndown/dist/turndown.min.js"></script><script src="https://jsd.cdn.zzko.cn/gh/ccknbc-forked/hexo-butterfly-copymarkdown/lib/copyMarkdown.min.js"></script><script src="https://jsd.cdn.zzko.cn/gh/ccknbc-forked/hexo-butterfly-copymarkdown/lib/reprint.min.js"></script><script>(function (w, d, s, id) {
        if (typeof (w.webpushr) !== 'undefined') return;
        w.webpushr = w.webpushr || function () { (w.webpushr.q = w.webpushr.q || []).push(arguments) };
        var js, fjs = d.getElementsByTagName(s)[0];
        js = d.createElement(s);
        js.id = id;
        js.async = 1;
        js.src = "https://cdn.webpushr.com/app.min.js";
        fjs.parentNode.appendChild(js);
        }(window, document, 'script', 'webpushr-jssdk'));

        webpushr('setup', {
        'key': 'BB9Y-w9p3u0CKA7UP9nupB6I-_NqE2MuODmKJjyC4W2YflX06Ff_hEhrNJfonrut5l6gCa28gC83q2OII7Qv-oA',
        'sw': 'none'
        });
        </script></body></html>